<template>
  <div class="form-view-row">
    <label>{{field.displayName}}</label>
    <div class="form-view-row-content form-location-view" :class="hasLocation ? '' : 'form-view-location-not'" @click="openMap">
      <i v-if="hasLocation" class="iconfont icon-address link-text"></i>
      {{ value && value.address }}
      
    </div>
  </div>
</template>

<script>
export default {
  name: 'form-location-view',
  props: {
    field: {
      type: Object,
      default: () => ({})
    },
    value: {
      type: [String, Object],
      default: () => ({})
    }
  },
  computed: {
    hasLocation() {
      return this.value?.latitude && this.value?.longitude 
    },
  },
  methods: {
    openMap() {
      this.$fast.map
        .display(this.value, {title: this.field.displayName })
        .catch(err => console.error('openMap catch an err: ', err))
    }
  },
}
</script>
<style scoped  lang="scss">
.form-view-row{
  .form-view-row-content{
    cursor: pointer;
  }
  .form-view-row-content:hover{
    color: $color-primary-light-6;
  }
}
</style>